<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>
<app-load *ngIf="isLoading"></app-load>
<div class="header">
  <div class="left flex" [routerLink]="['/main/statistics']" id="btn-back">
    <div class="left-icon">
      <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
    </div>
    <div class="left-name">
      <span class="back-name">返回</span>
    </div>
  </div>
  <div class="center">订单记录列表</div>
</div>

<div class="main">
  <div class="search-box">
    <div class="search flex">
      <div class="start">开始时间：</div>
      <div class="input">
        <input type="date" class="search-input" [(ngModel)]="params.startTime" id="start-time" value="">
      </div>
      <!--<div class="text">-->
        <!--<span class="clear-data" (click)="clearData()">清除</span>-->
      <!--</div>-->
    </div>
    <div style="height: 10px">&nbsp;</div>
    <div class="search flex" style="padding-bottom: .7em">
      <div class="start"> 结束时间：</div>
      <div class="input">
        <input type="date" class="search-input" [(ngModel)]="params.endTime">
      </div>
      <!--<div class="text">-->
        <!--<span class="search-btn" (click)="getData(true)">搜索</span>-->
      <!--</div>-->
    </div>
    <div class="search flex" style="padding-bottom: .7em" *ngIf="isShowSpc">
      <div class="start"> 免单：</div>
      <div class="input">
        <select name="" class="search-input" [(ngModel)]="params.is_free">
          <option value="">全部</option>
          <option value="0">否</option>
          <option value="1">是</option>
        </select>
      </div>
      <!--<div class="text">-->
      <!--</div>-->
    </div>
    <div class="search flex" style="padding-bottom: .7em" *ngIf="isShowSpc">
      <div class="start"> 招待单：</div>
      <div class="input">
        <select name="" class="search-input" [(ngModel)]="params.is_entertain">
          <option value="">全部</option>
          <option value="0">否</option>
          <option value="1">是</option>
        </select>
      </div>
      <!--<div class="text">-->
      <!--</div>-->
    </div>
    <div class="search flex" style="padding-bottom: .7em" *ngIf="isShowSpc">
      <div class="start"> 挂账：</div>
      <div class="input">
        <select name="" class="search-input" [(ngModel)]="params.is_credit">
          <option value="">全部</option>
          <option value="0">否</option>
          <option value="1">是</option>
        </select>
      </div>
      <!--<div class="text">-->
      <!--</div>-->
    </div>

    <div style="text-align: center;height: 3em;">
      <span class="yami-btn" style="background: #3385ff;" (click)="getData(true)">搜索</span>
      <span class="yami-btn" style="color: #666;margin-left: 1em;" (click)="clearData()">清除</span>
    </div>
  </div>
  <div *ngIf="list.length"
       style="font-weight: 600;font-size: 1.2em;padding-left: 1em;background: #fff;border-top: 2px solid #3c8dbc;height:3em;line-height:3em;text-align: left;color: #666;">
    点击列表查看订单详情
  </div>
  <div class="record-box">
    <div class="record-list" *ngFor="let v of list" (click)="getDetails(v)">
      <div class="record-item flex">
        <div class="record-item-name">餐桌名称</div>
        <div class="record-item-text">{{v.tname}} <span class=""
                                                        *ngIf="v.is_credit=='1' || v.is_entertain == '`' || v.is_entertain == '1' || v.is_free == '1' || v.is_revoke == '1' && v.is_card_pay=='1'">
        <span class="record-item-ext" *ngIf="v.is_credit=='1'"><span
          style="background: #ff3860;color: #fff">挂帐</span></span> <!-- 是否为挂帐单 -->
        <span class="record-item-ext" *ngIf="v.is_entertain == '1'"><span
          style="background: #ff3860;color: #fff">招待单</span></span> <!-- 是否为招待单 -->
        <span class="record-item-ext" *ngIf="v.is_free == '1'"><span
          style="background: #ff3860;color: #fff">免单</span></span> <!-- 是否免单 -->
        <span class="record-item-ext" *ngIf="v.is_revoke == '1'"><span
          style="background: #ff3860;color: rgba(0, 0, 0, 0.7)">撤单</span></span> <!-- 是否撤单 -->
        <span class="record-item-ext" *ngIf="v.is_card_pay"><span style="background: #ff0000;color: #fff"
                                                                  *ngIf="v.is_input_card_code == '1'">未验证</span></span>
          <!-- 是否使用会员支付 (是否使用短信验证码进行验证) -->
      </span></div>
      </div>
      <!--<div class="record-item flex" >-->
      <!--<div class="record-item-name">预账单编号</div>-->
      <!--<div class="record-item-text">{{v.order_id}}</div>-->
      <!--</div>-->
      <div class="record-item flex">
        <div class="record-item-name">下单时间</div>
        <div class="record-item-text">{{v.order_time}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">订单总价</div>
        <div class="record-item-text">￥{{v.total}}</div>
      </div>
      <div class="record-item flex" *ngIf="v.settlement_money">
        <div class="record-item-name">结算价</div>
        <div class="record-item-text">￥{{v.settlement_money}}</div>
      </div>
      <div class="record-item flex" *ngIf="v.settlement_money">
        <div class="record-item-name">折扣</div>
        <div class="record-item-text">{{(v.settlement_money/v.total).toFixed(2)}}</div>
      </div>

      <!--<div class="record-detail-link"><span>查看详情</span></div>-->
    </div>
  </div>

  <div class="load-data" *ngIf="loading">
    <p class="load-data-icon">
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </p>
    <p class="load-data-text">
      数据加载中
    </p>
  </div>

  <div class="load-more" *ngIf="totalPage > params.start" (click)="loadMore()">
    <i class="fa fa-spinner fa-spin fa-fw"></i> <span>点击加载更多...</span>
  </div>
</div>
<div class="no-data" *ngIf="!list.length && isFlag">
  <p class="load-data-description">
    <i class="fa fa-info-circle"></i> <span>暂无统计数据</span>
  </p>
</div>
